<%@ page language="java" import="java.util.*,cat.dao.*,cat.beans.*"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE>
<html>
<head>
<base href="<%=basePath%>">
<title>商品添加</title>
<link rel="stylesheet" type="text/css" href="css/edittable.css"></link>
<link rel="stylesheet" type="text/css" href="css/validate.css"></link>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/validate.js"></script>
<script>
	$(function() {
		//点击文件选择框后,把选中的文件路径,展示在假的文本框内

		//点击重置后,把页面信息清除
		$("#btnreset").click(function() {
			clearInfo();
			return false;

		});

		function clearInfo() {
			$("label").html("");
			$("input[type=text]").val("");
			$("#preview").removeAttr("src");
			$("#bigCateId").val("-1"); //让大分类下拉框选中第一项
			$("#smallCateId").empty();
			$(":file").val("");
			$("#smallCateId").append("<option value='-1'>-所属小分类-</option>");
		}
	});

	//处理文本域和按钮鼠标的动态相式
	$(function() {
		$("input[type=text],textarea").focus(function() {
			$(this).addClass("input_focus");
		}).blur(function() {
			$(this).removeClass("input_focus");
		});

		$(".form_btn").hover(function() {
			$(this).css("color", "red").css("background", "#6FB2DB");
		},

		function() {
			$(this).css("color", "#295568").css("background", "#BAD9E3");
		});
	});

	//初始化下拉框
	$(function() {
		$("#bigCateId")
				.change(
						function() {
							if (this.value == "-1") {
								$("#smallCateId").html(
										"<option>-所属小分类-</option>");
								return;
							}
							$
									.ajax({
										url : "CateServlet.do",
										type : "POST",
										async : false,
										dataType : "json",
										data : {
											bigcateid : this.value,
											flag : "listsmallcate"
										},
										success : function(cateList) {
											$("#smallCateId").empty();
											$
													.each(
															cateList,
															function(key,
																	cateInfo) {
																var optionStr = "<option value='"+cateInfo.id+"'>"
																		+ cateInfo.cateName
																		+ "</option>";
																$(
																		"#smallCateId")
																		.append(
																				optionStr);
															});

											//如果是页面回发,要让列表框选中原来选中的值(在ie6中还有 一些问题,要进行处理)
											$("#smallCateId").val(
													"${goods.smallCateId}");
										}
									});

						});

		//页面提交回发后,要再初始化一下二级下拉框 
		$("#bigCateId").change();

	});

	//验证用户名
	function validateGoodsName(item) {
		var result = true;
		var reg = /^\S{2,20}$/; //2-20个非空字符
		if (!reg.test(item.value)) {
			result = false;
			showError(item, "商品名称格式不正确");
		}

		if (result == true) {
			showOk(item);

		}
		return result;
	}

	//验证计量单位
	function validateUnit(item) {
		var result = true;
		var reg = /^\S{1,10}$/; //1-10个非空字符
		if (!reg.test(item.value)) {
			result = false;
			showError(item, "计量单位格式不正确");
		}

		if (result == true) {
			showOk(item);
		}
		return result;
	}

	//验证商品价格
	function validatePrice(item) {
		var result = true;

		if (item.value == "") {
			result = false;
			showError(item, "请添写商品价格");
		} else if (isNaN(item.value)) {
			result = false;
			showError(item, "商品价格格式不正确");
		}

		else if (item.value < 0) {
			result = false;
			showError(item, "难道这商品卖了还要倒找钱吗");
		}

		if (result == true) {
			showOk(item);
		}
		return result;
	}

	//总验证
	function validateInput() {
		$("#result_msg").html(""); //清除原来的验证信息
		var result = true;

		if (validateGoodsName(document.getElementById("goodsName")) == false) {
			result = false;
		}

		if (validateUnit(document.getElementById("unit")) == false) {
			result = false;
		}

		if (validatePrice(document.getElementById("price")) == false) {
			result = false;
		}

		if (result == true) {
			result = confirm('确定提交吗');
		}

		return result;

	}
</script>

<script type="text/javascript">
	function setImagePreview(docObj, localImagId, imgObjPreview, width, height) {
		if (docObj.files && docObj.files[0]) { //火狐下，直接设img属性        
			imgObjPreview.style.display = 'block';
			imgObjPreview.style.width = width;
			imgObjPreview.style.height = height;
			//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式        
			imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
		} else { //IE下，使用滤镜      
			docObj.select();
			var imgSrc = document.selection.createRange().text;
			//必须设置初始大小        
			localImagId.style.width = width;
			localImagId.style.height = height;
			//图片异常的捕捉，防止用户修改后缀来伪造图片        
			try {
				localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
				localImagId.filters
						.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
			} catch (e) {
				alert("您上传的图片格式不正确，请重新选择!");
				return false;
			}
			imgObjPreview.style.display = 'none';
			document.selection.empty();
		}
	}
</script>

<style>
		label {
			margin-left: 10px;
		}
		
		#divImg{
			margin:6px;
			width:100px;
			height:120px;
			background:silver;
		}
		#preview{
			width:100px;
			height:120px;
		}
</style>
</head>

<body>
	<div class="div_title">
		<div class="div_titlename">
			<img src="images/san_jiao.gif"><span>商品管理 添加商品</span>
		</div>
	</div>

	<form action="GoodsServlet.do?flag=add" method="post" name="form1"
		enctype="multipart/form-data" onsubmit="return validateInput()">

		<table class="edit_table">
			<tr>
				<td class="td_info">商品名称:</td>
				<td class="td_input"><input type="text" class="txtbox"
					id="goodsName" name="goodsName"
					onfocus="showInfo(this,'2-20位非空白字符')"
					onblur="validateGoodsName(this)" value="${goods.goodsName}" />
					<label class="validate_info" id="goodsName_msg">2-20位非空白字符</label>
				</td>
				<td></td>

			</tr>
			<tr>
				<%
					List<CateInfo> cateList = new CateDao().getCateList(0);
				request.setAttribute("cateList", cateList);
				%>
				<td class="td_info">所属分类</td>
				<td><select name="bigCateId" id="bigCateId">
						<option value="-1">-所属大分类-</option>
						<c:forEach var="cate" items="${cateList}">
							<option value="${cate.id }"
								<c:if test="${cate.id==goods.bigCateId}">selected</c:if>>${cate.cateName }</option>
						</c:forEach>
				</select> <select id="smallCateId" name="smallCateId">
						<option value="-1">-所属小分类-</option>
				</select> <label class="validate_info" id="password_msg">请指定商品所属的分类</label>
					<script>
						$("#bigCateId").change();
					</script></td>
				<td></td>
			</tr>
			<tr>
				<td class="td_info">计量单位</td>
				<td><input type="text" class="txtbox" id="unit" name="unit"
					onfocus="showInfo(this,'1-10个非空字符')" onblur="validateUnit(this)"
					value="${goods.unit }" /> <label class="validate_info"
					id="unit_msg">1-10个非空字符</label></td>
				<td></td>

			</tr>
			<tr>
				<td class="td_info">商品价格</td>
				<td><input type="text" class="txtbox" id="price" name="price"
					onfocus="showInfo(this,'不能为空,以元为单位,可以是小数')"
					onblur="validatePrice(this)" value="${goods.price }" />
					<label class="validate_info" id="price_msg">不能为空,以元为单位,可以是小数</label>
				</td>
				<td></td>

			</tr>

			<tr>
				<td class="td_info">生产厂商</td>
				<td><input type="text" class="txtbox" id="price"
					name="producter" value="${goods.producter }" /> <label
					class="validate_info" id="producter_msg"></label></td>
				<td></td>
			</tr>

			<tr>
				<td class="td_info">商品图片</td>
				<td>
					<div class="file-box">
						<input type="file" name="picture" id="picture"  style="display:none" onchange="setImagePreview(this,divImg,preview,'100px','125px');" />
					</div>
					<div id="divImg" onclick="document.getElementById('picture').click()">
						<img id="preview" src="GoodsServlet.do?flag=showPicture&goodsId=${goods.id}" >
					</div>
	
					<label class="validate_info" id="picture_msg"></label>
				</td>
				<td></td>
			</tr>

			<tr>
				<td class="td_info">备注信息:</td>
				<td><textarea rows="4" cols="27" name="des" class="txtarea">${goods.des }</textarea>
				</td>
				<td></td>
			</tr>
			<tr>
				<td class="td_info"></td>
				<td><input class="form_btn" type="submit" value="提交" />
					<button id="btnreset" class="form_btn">重置</button> <label
					id="result_msg" class="result_msg">${msg}</label></td>
				<td></td>
			</tr>
		</table>

	</form>
</body>
</html>
